<table ng-if="current_tab=='themes'" class="table table-striped table-condensed">
  <thead>
    <th style="width:30px">#</th>
    <th style="width:250px" ng-class="{'active': predicate == 'name' }" ng-click="predicate = 'name'; sort.reverse=!sort.reverse">
      Name
      <span ng-if="sort.predicate == 'name' && sort.reverse == true">▼</span>
      <span ng-if="sort.predicate == 'name' && sort.reverse == false">▲</span>
    </th>
    <th style="width:240px" ng-class="{'active': sort.predicate == 'jsonTheme.author' }" ng-click="sort.predicate = 'jsonTheme.author'; sort.reverse=!sort.reverse">
      Author
      <span ng-if="sort.predicate == 'jsonTheme.author' && sort.reverse == true">▼</span>
      <span ng-if="sort.predicate == 'jsonTheme.author' && sort.reverse == false">▲</span>
    </th>
    <th style="width:80px" ng-class="{'active': sort.predicate == 'jsonTheme.settings.length' }" ng-click="sort.predicate = 'jsonTheme.settings.length'; sort.reverse=!sort.reverse">
      Scopes
      <span ng-if="sort.predicate == 'jsonTheme.settings.length' && sort.reverse == true">▼</span>
      <span ng-if="sort.predicate == 'jsonTheme.settings.length' && sort.reverse == false">▲</span>
    </th>
    <th style="width:80px" ng-class="{'active': sort.predicate == 'general_settings_count' }" ng-click="sort.predicate = 'general_settings_count'; sort.reverse=!sort.reverse">
      General
      <span ng-if="sort.predicate == 'general_settings_count' && sort.reverse == true">▼</span>
      <span ng-if="sort.predicate == 'general_settings_count' && sort.reverse == false">▲</span>
    </th>
    <th style="width:140px" ng-class="{'active': sort.predicate == 'bgcolor' }" ng-click="sort.predicate = 'bgcolor'; sort.reverse=!sort.reverse">
      BG
      <span ng-if="sort.predicate == 'bgcolor' && sort.reverse == true">▼</span>
      <span ng-if="sort.predicate == 'bgcolor' && sort.reverse == false">▲</span>
    </th>
    <th ng-class="{'active': sort.predicate == 'is_light' }" ng-click="sort.predicate = 'is_light'; sort.reverse=!sort.reverse">
      light/dark
      <span ng-if="sort.predicate == 'is_light' && sort.reverse == true">▼</span>
      <span ng-if="sort.predicate == 'is_light' && sort.reverse == false">▲</span>
    </th>
  </thead>
  <tbody>
    <tr ng-repeat="theme in themes | orderBy:sort.predicate:sort.reverse">
      <td>{{::$index + 1 }}</td>
      <td><a ng-href="/#!/editor/theme/{{::theme.name }}">{{::theme.name }}</a></td>
      <td>{{::theme.jsonTheme.author.truncate(22) }}</td>
      <td>{{::theme.jsonTheme.settings.length }}</td>
      <td>{{::theme.general_settings_count }}</td>
      <td>
        <span class="stats-color-box" style="background-color: {{::theme.bgcolor.slice(0,7) }}"></span>
        {{::theme.bgcolor }}
      </td>
      <td>
        <div ng-if="theme.is_light"  style="width: 16px; height: 16px; border: 1px solid rgba(0,0,0,.4); position: relative; top:2px; background-color: #fff"></div>
        <div ng-if="!theme.is_light" style="width: 16px; height: 16px; border: 1px solid rgba(0,0,0,.4); position: relative; top:2px; background-color: #333"></div>
      </td>
    </tr>
  </tbody>
</table>
